<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>信用卡快速还款</title>
    <!--1.引入bootstrap框架的样式； -->
    <link rel="stylesheet" href="../../../bootstrap/css/bootstrap.min.css">
    <!--3.引入Layer样式； -->
    <link rel="stylesheet" href="../../../layer/layer/theme/default/layer.css">
    <!--4.引入jquery框架-->
    <script src="../../../bootstrap/js/jquery.min.js"></script>
    <!--5.引入boostrap框架的JS-->
    <script src="../../../bootstrap/js/bootstrap.min.js"></script>
    <!--6.引入Layer框架的JS-->
    <script src="../../../layer/layer/layer.js"></script>

</head>
<body>

<div class="container">
    <div class="panel panel-primary" id="pa">
        <div class="panel-heading" id="head">
            <h1 id="hl" >信用卡还款
                <span th:text="'当前可用额度:'+${#numbers.formatDecimal((credit.creditLimit)-credit.debt,1,'COMMA',2,'POINT')}" style=" color: #3cd3d3; float: right"></span>
            </h1>
        </div>
        <div class="panel-body">
            <form class="form-horizontal" action="/repayment/result" method="post" id="myform">
                <div class="form-group " hidden>
                    <label  class="col-sm-2 control-label"></label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="data" name="data" >
                    </div>
                </div>
                <div class="form-group " hidden>
                    <label  class="col-sm-2 control-label"></label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="bankcardnum" name="bankcardnum" >
                    </div>
                </div>
                <div class="form-group " >
                    <label  class="col-sm-2 control-label">账单号</label>
                    <div class="col-sm-8">
                        <input name="billId" th:value="${bill.billId}"  class="form-control" style="border: 0" id="billId" readonly>
                    </div>
                </div>
                <div class="form-group " >
                    <label  class="col-sm-2 control-label">信用卡卡号</label>
                    <div class="col-sm-8">
                        <input name="cardnum" th:value="${credit.cardnum}"  class="form-control" style="border: 0" id="inputEmail4" readonly>
                    </div>
                </div>
                <div class="form-group " >
                    <label class="col-sm-2 control-label">本期账单</label>
                    <div class="col-sm-8">
                        <input name="newbalance" th:value="${#numbers.formatDecimal(bill.billAmount+bill.getBillStage(),1,'COMMA',2,'POINT')}"  class="form-control" style="border: 0" id="bill"  readonly>
                    </div>
                </div>
                <div class="form-group" >
                    <label  class="col-sm-2 control-label" >请选择还款方式</label>
                    <div class="col-sm-8" style="font-size: 18px">
                       自定义金额 <input type="radio"   id="inputPassword7"  name="payway" value="0" >&nbsp;&nbsp;&nbsp;&nbsp;
                       本期应还金额 <input type="radio"   id="inputPassword8"  name="payway" value="1" >&nbsp;&nbsp;&nbsp;&nbsp;
                       本期最低应还金额 <input type="radio"   id="inputPassword9"  name="payway" value="2" >
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">还款金额</label>
                    <div class="col-sm-8">
                        <input name="repaymentmoney" type="text" class="form-control"  id="repaymentmoney"  placeholder="请输入还款金额" >
                    </div>
                </div>
               
                <div class="form-group">
                    <label  class="col-sm-2 control-label">应付合计</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="inputPassword13" readonly >
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">还款账号</label>
                    <div class="col-sm-8">
                        <select  class="form-control" id="select">
                        <option value="">请选择还款卡号</option>
                        <option th:each="item,itemStat:${allBankcard}"
                                th:value="${item.phonenum}"
                                th:text="${item.bankcardnum}" >
                        </option>
                    </select>
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-6">
                        <input type="text" id="code" placeholder="请输入验证码5分钟内有效" >
                        <!--<button class="yz-btn" th:onclick="'sendMsgCode()'">免费获取验证码</button>-->
                        <a class="btn btn-warning" id="moBtn" href="javascript:;" >获取验证码</a>
                        <a class="btn btn-warning"  id="secondShow" href="javascript:;"></a>
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="password" placeholder="请输入还款卡号密码" >
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-8">
                        <button type="button" class="btn btn-success btn-block btn-lg " id="repayment" >立即还款</button>
                        <!--<button type="button" ng-click="checkuser()" class="btn btn-primary  ">确认登录</button>-->
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer text-center">预计2-3个工作日到账</div>
    </div>
</div>

</body>
<script>

     $("#secondShow").hide();
    var countdown=60;  // 时长 s
    // 获取验证码按钮点击事件
     $("#moBtn").click(function () {
         if ($("#select option:selected").val()!=null && $("#select option:selected").val()!="") {
        $("#secondShow").show();
        $("#moBtn").hide();
        $.get("/repayment/code?phonenum="+$("#select option:selected").val()).success(function (data) {

            if (data!=null) {
                layer.msg("短信发送成功,验证码为:"+data,{icon:6})
            }else {
                layer.msg("短信发送失败,请重新发送!",{icon:5})
            }
        });
        $("#secondShow").html('重新发送('+countdown+'s)');
        var timer = setInterval(function () {
            if (countdown == 0) {
                clearInterval(timer);
                $("#secondShow").hide();
                $("#moBtn").show();
                countdown = 60;
                console.log(countdown);
            }
            $("#secondShow").html('重新发送('+(countdown-1)+'s)');
            countdown--;
        }, 1000);
         }else {
             layer.msg("您还未选中任何还款银行卡")
         }
         });

    //还款验证
     $("#repayment").click(function () {

         if ($("#bill").val()==null | $("#bill").val()==0) {
             layer.msg("本期已还清无需还款")
         }else {

             if ($("#repaymentmoney").val()==null | $("#repaymentmoney").val()==0) {
                 layer.msg("还款金额不能为空,请重新输入!")
             }else {
                if ($("#select option:selected").val()==null | $("#select option:selected").val()=="") {
                    layer.msg("您还未选择银行卡!")
                }else {

                    $.get("/repayment/checkcode?code="+$("#code").val()+"&phonenum="+$("#select option:selected").val() ).success(function (data) {
                        if (data==1) {
                            $.get("/repayment/password?bankcardnum="+$("#select option:selected").text()+"&password="+$("#password").val()).success(function (data) {
                                if (data==1) {
                                    $.get("/repayment/deduct?money="+quqianfenwei($("#inputPassword13").val())*1+"&bankcardnum="
                                        +$("#select option:selected").text()+"&billId="+$("#billId").val()).success(function (data) {
                                        if (data==2) {
                                            layer.msg("银行卡余额不足,请换一张卡!");
                                        }else {
                                            $("#data").val(data);
                                            $("#bankcardnum").val($("#select option:selected").text());
                                           $("#myform").submit();
                                        }
                                    })
                                }else {
                                    layer.msg("密码错误,请重新输入!")
                                }
                            })
                        }else {
                            layer.msg("验证码错误,请重新输入!")
                        }
                    })
                }
             }
         }
     });

    //选择还款类型
     $("input[name='payway']").click(function () {
         if ($(this).val()==0) {
             $("#repaymentmoney").val(null);
             $("#inputPassword13").val( $("#repaymentmoney").val());
             $("#repaymentmoney").prop('readonly',false);
         }else if ($(this).val()==1) {
                 $("#repaymentmoney").val($("#bill").val());
             $("#inputPassword13").val( $("#repaymentmoney").val());
                 $("#repaymentmoney").prop('readonly',true);
         }else if ($(this).val()==2) {
            var money = quqianfenwei($("#bill").val())*0.1;
             $("#repaymentmoney").val(qianfenwei(money));
             $("#inputPassword13").val( $("#repaymentmoney").val());
             $("#repaymentmoney").prop('readonly',true);
         }
     });
     //还款金额输入框失去焦点事件
     if ($("input[name='payway']").val()==0) {
        $("#repaymentmoney").blur(function () {

            setTimeout(function () {                                     //当失去焦点与点击事件同事执行时,设置延时150毫秒就可以先执行点击事件
                if (  isNumber($("#repaymentmoney").val())) {

                var money = quqianfenwei($("#repaymentmoney").val());
                var money2 = quqianfenwei($("#bill").val());
                if (money>=money2*0.1 && money<=money2*1) {
                    $("#repaymentmoney").val(qianfenwei(money));
                    $("#inputPassword13").val($("#repaymentmoney").val());
                }else if(money<money2*0.1){
                    $("#inputPassword13").val(null);
                    $("#repaymentmoney").val(null);
                    layer.msg("还款金额不能小于最低还款金额!,请重新输入")
                }else if(money>money2*1){
                    $("#inputPassword13").val(null);
                    $("#repaymentmoney").val(null);
                    layer.msg("已超过全部可还金额,请重新输入!")
                }
                }else {
                    layer.msg("请输入正确的资金",{time:1000});
                    $("#inputPassword13").val(null);
                    $("#repaymentmoney").val(null);
                }
            },150);
    })
     };
//判断输入的是否为数字
     function isNumber(value) {
                      var patrn = /^(-)?\d+(\.\d+)?$/;
                      if (patrn.exec(value) == null || value == "") {
                             return false
                         } else {
                             return true
                         }
                  }
    $("#inputPassword13").val($("#repaymentmoney").val());
    //千分位分隔符,并保留两位小数格式化
     function qianfenwei(obj){//输入obj=123456.7890
         var mnyReg = /^([1-9][0-9]*|(([0]\.[0-9]{0,2}[1-9]\d*|[1-9][0-9]*\.\d*)))$/;//根据需求修改
         if(!(mnyReg.test(obj))){

             return;
         }
         var n = 2; //保留得小数位
         obj = parseFloat(obj).toFixed(n); //obj=123456.789
         var left = obj.split(".")[0].split("").reverse();//left = ["6","5","4","3","2","1"]
         var right = obj.split(".")[1]; //right = "789"
         var total = new Array();
         for (i = 0; i < left.length; i++) {
             total.push(left[i]);
             if((i + 1) % 3 == 0 && (i + 1) != left.length){
                 total.push(",");
             }
         } //total = ["6","5","4",",","3","2","1"]
         return total.reverse().join("") + "." + right;
     }
     //去千分位分隔符
    function quqianfenwei(oldMny){
        oldMny=oldMny.replace(/,/g, '');
         return oldMny;
     }
     setTimeout(function () {   //延时执行,合计应付为readonly属性,回退时input数据丢失,需重新赋值,不延时取不到
         $("#inputPassword13").val( $("#repaymentmoney").val());
     //$("#inputPassword13").prop('readonly',true);
     },150);
</script>
</html>